<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>活动管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" th:href="@{/css/mui.min.css}">
    <!--App自定义的css-->
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
    <style>
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title" th:text="${categoryName}"></h1>
</header>
<div class="mui-content">
    <div class="mui-card">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell mui-media" th:each="item:${list}" onclick="openWindow('${item.id}')">
                <a class="mui-navigate-right" th:href="'/app/detail/'+${item.id}">
                    <img class="mui-media-object mui-pull-left" th:src="${item.coverImage}">
                    <div class="mui-media-body">
                        <th:block th:text="${item.title}"></th:block>
                        <p class='mui-ellipsis' th:text="${item.description}"> 烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                    </div>
                </a>
            </li>
           <!-- <li class="mui-table-view-cell mui-media">
                <a class='mui-navigate-right' href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../images/yuantiao.jpg">
                    <div class="mui-media-body">
                        远眺
                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a class="mui-navigate-right">
                    <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
                    <div class="mui-media-body">
                        幸福
                        <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                    </div>
                </a>
            </li>-->
        </ul>
    </div>
</div>

</body>
<script th:src="@{/js/mui.min.js}"></script>
<script th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });


</script>
<script>
    function openWindow(name) {
        mui.openWindow({
            id: name,
            url: name + ".html?name=44",
            show: {
                duration: 300 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
            }
        });
    }
</script>
</html>
